<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">
				<picker mode="date" :value="date" @change="dateChange">
					{{date}} 作业
				</picker>
			</block>
		</cu-custom>
		<view style="height: 40px;">
			<a-tabs @click="inquire" style="position: fixed;left: 0;right: 0;z-index: 2;font-size: 12px;" :row="3" type="border"
			 :value="status"></a-tabs>
		</view>
		<view style="color:red">
			使用接口 /api/v1/works/findWorksPage
			<br>
			没有状态筛选字段,建议添加描述字段。用内容做为描述显示不好看
			<br>
			使用日期筛选字段（startTime）无效
		</view>
		<a-scroll :request="get" ref="aScroll" :parm='{pageSize:10000}'>
			<template #item="{row:x,index}">
				<a-list :value="x" :url="`./details?id=${x.id}`"></a-list>
			</template>
		</a-scroll>
	</view>
</template>

<script>
	import {
		format
	} from "@/common/js/utils";
	export default {
		//上拉触底
		onReachBottom() {
			this.$refs.aScroll.lower();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.$refs.aScroll.get(true).then(res => {
				uni.stopPullDownRefresh();
			});
		},
		data() {
			return {
				date: format(new Date(), "yyyy-MM-dd"),
				status: [{
					name: "进行中"
				}, {
					name: "已结束"
				}, {
					name: "未开始"
				}],
				tabsParm: {
					name: "进行中"
				},
			}
		},
		methods: {
			get(parm = {}) {
				return this.$http.post('/api/v1/works/findWorksPage', {
					...parm,
					...this.tabsParm,
					startTime: this.date
				}).then(res => {
					return {
						total: res.totalSize,
						data: res.results.map(x => {
							return {
								...x,
								name: x.title,
								sonTitle: x.content,
								phone: format(x.createTime),
								img: require('./1.png')
							}
						})
					}
				});

				const data = new Array(15).fill({
					name: "语文",
					sonTitle: "默写将进酒全文",
					phone: "已耗时16分钟",
					img: require('./1.png')
				});
				console.log('请求：' + JSON.stringify({
					...parm,
					...this.tabsParm,
					date: this.date
				}));
				return new Promise(r => {
					setTimeout(e => {
						r({
							total: 200,
							data
						})
					}, 1000);
				});
			},
			inquire(e) {
				this.tabsParm = e;
				this.$refs.aScroll.get(true);
			},
			dateChange({
				detail: {
					value
				}
			}) {
				this.date = value;
				this.$refs.aScroll.get(true);
			},
		}
	}
</script>

<style>

</style>
